<template>
<div>

  <el-row>
    <el-col :span="24">

      <h2 style="font-family: 楷体,serif;margin-left: 50px;margin-top: 50px">添加应收租约保理产品</h2>
      <div class="grid-content bg-purple-light" >

        <el-form ref="form" :model="form" :rules="rules" label-width="200px" :inline="true" :disabled="read">

          <el-form-item label="产品名称" prop="jrProductName">
            <el-input v-model="form.jrProductName" placeholder="请输入产品名称" />
          </el-form-item>

          <el-form-item label="资金提供方" prop="companyId">
            <el-select v-model="form.companyId" placeholder="请选择">
              <el-option v-for="(value,key) in companyEnumMap" :label="value" :value="key"></el-option>
            </el-select>
          </el-form-item>
          <br><br>

          <el-form-item label="分期期限" prop="instalmentPeriod">
            <el-radio-group v-model="form.instalmentPeriod">
              <el-radio v-for="(value,key) in instalmentEnumMap" :label="key">{{value}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <br><br>

          <el-form-item label="授信额度" prop="creditLine">
            <el-input-number v-model="form.creditLine" :controls="false" :precision="2" :step="0.1" placeholder="请输入授信额度 %"></el-input-number>
          </el-form-item>

          <el-form-item label="还款方式" prop="repaymentType">
            <el-radio-group v-model="form.repaymentType">
              <el-radio v-for="(value,key) in repaymentEnumMap" :label="key">{{value}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <br><br>

          <el-form-item label="账户类型" >
            <el-select v-model="form.accountType" placeholder="请选择" @change="accountTypeChange" clearable>
              <el-option v-for="(value,key) in accountTypeMap" :label="value" :value="key"></el-option>
            </el-select>
          </el-form-item>
          <br><br>

          <div v-show="public || private">

            <el-form-item label="开户行所在省" prop="bankAccountProvince">

              <el-select v-model="form.bankAccountProvince" filterable placeholder="请选择">
                <el-option
                  v-for="item in provinceList"
                  :key="item.id"
                  :label="item.cityname"
                  :value="item.id">
                </el-option>
              </el-select>

            </el-form-item>

            <el-form-item label="银行名称" prop="bankName">

              <el-select v-model="form.bankId" filterable placeholder="请输入银行名称" @change="bankChange">
                <el-option
                  v-for="(value,key) in bankMap"
                  :key="key"
                  :label="value"
                  :value="key">
                </el-option>
              </el-select>

            </el-form-item>
          </div>

          <div v-show="public">

            <el-form-item label="开户行(支行)" prop="openingBank">
              <el-input v-model="form.openingBank" placeholder="请输入开户行(支行)" />
            </el-form-item>

            <el-form-item label="联行行号" prop="bankBranchCodeLh">
              <el-input v-model="form.bankBranchCodeLh" placeholder="请输入联行行号" />
            </el-form-item>

          </div>

          <div v-show="public || private">

            <el-form-item label="账户名称" prop="accountName">
              <el-input v-model="form.accountName" placeholder="请输入账户名称" />
            </el-form-item>

            <el-form-item label="银行卡号" prop="bankCardNumber">
              <el-input v-model="form.bankCardNumber" placeholder="请输入银行卡号" />
            </el-form-item>

          </div>

          <el-form-item label="申请条件" prop="applicationConditions">
            <el-input v-model="form.applicationConditions" type="textarea" cols="40" rows="4" placeholder="请输入申请条件" />
          </el-form-item>
          <br><br>

          <el-form-item label="风控要求" prop="riskRequirement">
            <el-input v-model="form.riskRequirement" type="textarea" cols="40" rows="4" placeholder="请输入风控要求" />
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer" style="margin-left: 600px;margin-bottom: 100px" v-if="!read">
          <el-button type="primary" @click="submitForm">提交保存</el-button>
          <el-button @click="cancel">重置</el-button>
        </div>
        <div slot="footer" class="dialog-footer" style="margin-left: 600px;margin-bottom: 100px" v-if="read">
          <el-button type="primary" @click="goBack">返回</el-button>
        </div>

      </div>
    </el-col>
  </el-row>

</div>
</template>

<script>
import {
  getProduct,
  delProduct,
  addProduct,
  updateProduct,
  getAccountTypeMap,
  getCompanyEnumMap, getInstalmentEnumMap, getRepaymentEnumMap
} from "@/api/finance/product";
import { listCity, getCity} from "@/api/city/city";
import { getBankMap } from "@/api/finance/bank";


  export default {
    name: "SaveInstallment",
    data (){

      var checkCreditLine = (rule, value, callback) => {

        if (value > 100) {
          this.$message.error('授信额度不能大于100%');
          this.form.creditLine = 100.0;
        } else {
          callback();
        }
      };
      return {

        accountTypeMap: {},
        companyEnumMap: {},
        instalmentEnumMap: {},
        repaymentEnumMap: {},
        bankMap: {},
        provinceList: [],
        public: false,
        private: false,
        read: false,
        // 表单参数
        form: {jrProductType: 3,},
        // 表单校验
        rules: {

          jrProductName: [
            { required: true, message: "产品名称不能为空", trigger: "blur" }
          ],
          companyId: [
            { required: true, message: "请选择资金提供方", trigger: "change" }
          ],
          instalmentPeriod: [
            { required: true, message: "请选择分期期限", trigger: "change" }
          ],
          repaymentType: [
            { required: true, message: "请选择还款方式", trigger: "change" }
          ],
          creditLine: [
            { required: true, message: "请输入授信额度", trigger: "blur" },
            { validator: checkCreditLine, trigger: 'change' }
          ],
          applicationConditions: [
            { required: true, message: "请输入申请条件", trigger: "blur" },
          ],
          riskRequirement: [
            { required: true, message: "请输入风控要求", trigger: "blur" },
          ]
        }
      }
    },
    methods: {

      // 表单重置
      reset() {
        this.form = {
          id: this.$route.params && this.$route.params.id ? this.$route.params.id : null,
          jrProductName: null,
          companyId: null,
          instalmentPeriod: null,
          creditLine: null,
          repaymentType: null,
          urlAddDetailInfoMobile: null,
          accountType: null,
          jrProductType: 3,
          bankAccountProvince: null,
          bankName: null,
          bankId: null,
          openingBank: null,
          bankBranchCodeLh: null,
          accountName: null,
          bankCardNumber: null,
          applicationConditions: null,
          riskRequirement: null,
        };
        this.resetForm("form");
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateProduct(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.$router.push('/finance/product');
              });
            } else {
              addProduct(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.$router.push('/finance/product');
              });
            }
          }
        });
      },
      // 取消按钮
      cancel() {

        this.public = this.private = false;
        this.reset();
      },
      initAccountTypeMap(){
        getAccountTypeMap().then(response => {

          this.accountTypeMap = response.data;
        });
      },
      initCompanyEnumMap(){
        getCompanyEnumMap().then(response => {

          this.companyEnumMap = response.data;

        });
      },
      initInstalmentEnumMap(){
        getInstalmentEnumMap(3).then(response => {

          this.instalmentEnumMap = response.data;
        });
      },
      initRepaymentEnumMap(){
        getRepaymentEnumMap(3).then(response => {

          this.repaymentEnumMap = response.data;
        });
      },
      initBankMap(){

        getBankMap().then(response => {

          this.bankMap = response.data;
        });
      },
      initProvinceList(){

        listCity({pid: 1}).then(response => {

          this.provinceList = response.data;
        });
      },

      /**
       * 回显
       */
      initInstallment(id){

        getProduct(id).then(response => {

          this.form = response.data;
          let data = response.data;
          this.form.repaymentType = data.repaymentType ? data.repaymentType + "" : null;
          this.form.instalmentPeriod = data.instalmentPeriod ? data.instalmentPeriod + "" : null;
          this.form.accountType = data.accountType ? data.accountType + "" : null;
          this.form.companyId = data.companyId ? data.companyId + "" : null;
          this.form.bankId = data.bankId ? data.bankId + "" : null;
          this.accountTypeChange(data.accountType);
        });
      },
      accountTypeChange(index){

        // 对公账户
        if (index == 1){

          this.public = true;
          this.private = false;
        } else if (index == 2){// 对私账户

          this.public = false;
          this.private = true;
        } else {

          this.public = this.private = false;
        }
      },
      bankChange(id){

        this.form.bankName = this.bankMap[id];
      },
      goBack(){

        history.back();
      }
    },
    created() {

      this.initAccountTypeMap();
      this.initCompanyEnumMap();
      this.initProvinceList();
      this.initInstalmentEnumMap();
      this.initRepaymentEnumMap();
      this.initBankMap();

      // 如果为修改
      const id = this.$route.params && this.$route.params.id;
      if (id){

        // 回显
        this.initInstallment(this.$route.params.id);
        this.read = this.$route.params.show === "true";
      }
    }

  };

</script>

<style scoped>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
